<template>
  <f7-page class="qm-page">
    <f7-navbar>
      <f7-nav-left>
        <f7-link back icon-material="chevron_left" force></f7-link>
      </f7-nav-left>
      <f7-nav-title>忘记密码</f7-nav-title>
      <f7-nav-right> </f7-nav-right>
    </f7-navbar>
    <f7-block class="qm-block">
      <f7-block-title class="qm-block-title">
        <div class="mobile-phone">重置登录密码</div>
      </f7-block-title>
      <van-form ref="form">
        <!-- 手机号 -->
        <van-field
          v-model="phone"
          :value="phone"
          name="phone"
          @input="gitPhone"
          class="qmfield"
          type="digit"
          :rules="[
            {
              validator: mobileRegex,
              message: '请输入正确内容',
            },
          ]"
          placeholder="请输入手机号"
        >
          <template #left-icon>
            <img src="static/img/land/index11/login_shoujihao.svg" alt="" />
          </template>
        </van-field>
        <!-- 验证码 -->
        <van-field
          v-model="msgNum"
          class="qmfield"
          type="digit"
          :rules="[{ required: true, message: '请输入正确内容' }]"
          placeholder="请输入验证码"
        >
          <template #left-icon>
            <img
              src="static/img/land/index11/login_yanzhengma.svg"
              alt=""
              class="iconimg"
            />
          </template>
          <template #button>
            <div class="rigth-button">
              <f7-button v-if="Verification" @click="sendMsg" fill round
                >获取验证码</f7-button
              >
              <f7-button v-else outline round disabled
                >{{ num }}重新获取</f7-button
              >
            </div>
          </template>
        </van-field>
        <!-- 新密码 -->
        <van-field
          v-model="password"
          class="qmfield"
          :type="textStyle"
          :rules="[
            {
              validator: passwordRegex,
              message: text,
            },
          ]"
          placeholder="请输入新密码"
        >
          <template #left-icon>
            <img src="static/img/land/index1/login_mima.svg" class="iconimg" />
          </template>
          <template #right-icon>
            <img
              src="static/img/land/index1/biyan.svg"
              alt=""
              width="30px"
              height="12px"
              v-if="!showPassword"
              @click="changeType()"
            />
            <img
              src="static/img/land/index1/kaiyan.svg"
              alt=""
              width="30px"
              height="12px"
              v-else
              @click="changeType()"
            />
          </template>
        </van-field>
        <!-- 确认密码 -->
        <van-field
          v-model="password2"
          class="qmfield"
          :type="textStyle2"
          :rules="[
            {
              validator: validateRePass,
              message: text2,
            },
          ]"
          placeholder="请输入新密码"
        >
          <template #left-icon>
            <img src="static/img/land/index11/login_querenmiam.svg" />
          </template>
          <template #right-icon>
            <img
              src="static/img/land/index1/biyan.svg"
              alt=""
              width="30px"
              height="12px"
              v-if="!showPassword2"
              @click="changeType2()"
            />
            <img
              src="static/img/land/index1/kaiyan.svg"
              alt=""
              width="30px"
              height="12px"
              v-else
              @click="changeType2()"
            />
          </template>
        </van-field>
      </van-form>
      <!-- 按钮 -->
      <f7-button raised fill round class="qm-button" @click="submit()"
        >设置密码</f7-button
      >
    </f7-block>
  </f7-page>
</template>

<script>
export default {
  data() {
    return {
      phone: null,
      msgNum: null,
      password: "",
      password2: "",
      showPassword: false,
      showPassword2: false,
      Verification: true,
      text: "请输入正确内容",
      text2: "请输入正确内容",
      num: 60,
      codeInfo: {},
      rsaPublic: "",
    };
  },
  computed: {
    textStyle() {
      if (this.showPassword) {
        return "text";
      } else {
        return "password";
      }
    },
    textStyle2() {
      if (this.showPassword2) {
        return "text";
      } else {
        return "password";
      }
    },
  },
  created() {
    this.loadRsaPublic();
  },
  methods: {
    loadRsaPublic() {
      this.$framework.account.getRsaPublic().then((rsaPublic) => {
        this.rsaPublic = rsaPublic;
      });
    },
    mobileRegex(val) {
      if (!val) {
        return false;
      } else {
        return /^0{0,1}(13[0-9]|14[01456789]|15[012356789]|16[2567]|17[012345678]|18[0-9]|19[012356789])[0-9]{8}$/.test(
          val
        );
      }
    },
    passwordRegex(value) {
      if (!value) {
        return false;
      } else {
        let pattern =
          /([a-zA-z]+\d+\S*\W+\S*)|(\d+[a-zA-z]+\S*\W+\S*)|(\d+\W+\S*[a-zA-z]+\S*)|([a-zA-z]+\W+\S*\d+\S*)|(\W+[a-zA-z]+\S*\d+\S*)|(\W+\d+\S*[a-zA-z]+\S*)/;
        if (value.length < 8 || !pattern.test(value)) {
          this.text =
            "密码必须同时由字母、数字、特殊符号(不包括_)等8位以上字符组成。";
          return false;
        }

        // 字母连续规则
        let strReg =
          /(a(?=b)|b(?=c)|c(?=d)|d(?=e)|e(?=f)|f(?=g)|g(?=h)|h(?=i)|i(?=j)|j(?=k)|k(?=l)|l(?=m)|m(?=n)|n(?=o)|o(?=p)|p(?=q)|q(?=r)|r(?=s)|s(?=t)|t(?=u)|u(?=v)|v(?=w)|w(?=x)|x(?=y)|y(?=z)|z(?=a)){3}[a-z]/i;
        // 数字连续规则
        let numReg =
          /(0(?=1)|1(?=2)|2(?=3)|3(?=4)|4(?=5)|5(?=6)|6(?=7)|7(?=8)|8(?=9)|9(?=0)){3}\d/;
        // 键盘字母横向连续规则
        let keyboardHorizontalReg =
          /(q(?=w)|w(?=e)|e(?=r)|r(?=t)|t(?=y)|y(?=u)|u(?=i)|i(?=o)|o(?=p)|p(?=q) |a(?=s)|s(?=d)|d(?=f)|f(?=g)|g(?=h)|h(?=j)|j(?=k)|k(?=l)|l(?=a) | z(?=x)|x(?=c)|c(?=v)|v(?=b)|b(?=n)|n(?=m)|m(?=z)){3}[a-z]/i;
        // 多个相同字母、数字规则
        let sameReg = /(\w)\1{3}/i;

        /**
         * 键盘斜线的4个字符是否在pwd里面
         */
        function isStrInSlope(pwd) {
          let keyboardSlopeArr = [
            "1qaz",
            "2wsx",
            "3edc",
            "4rfv",
            "5tgb",
            "6yhn",
            "7ujm",
            "8ik,",
            "9ol.",
            "0p;/",
            "=[;.",
            "-pl,",
            "0okm",
            "9ijn",
            "8uhb",
            "7ygv",
            "6tfc",
            "5rdx",
            "4esz",
          ];
          return keyboardSlopeArr.some(
            (v) => pwd.toLowerCase().indexOf(v) > -1
          );
        }

        if (sameReg.test(value)) {
          this.text = "密码不能含有连续4位相同的数字或字母";
          return false;
        } else if (strReg.test(value)) {
          this.text = "密码不能含有4位连续的字母";
          return false;
        } else if (numReg.test(value)) {
          this.text = "密码不能含有4位连续的数字";
          return false;
        } else if (keyboardHorizontalReg.test(value)) {
          this.text = "密码不能含有4位键盘横向方向连续的字母";
          return false;
        } else if (isStrInSlope(value)) {
          this.text = "密码不能含有4位键盘斜向方向连续的字符";
          return false;
        } else if (
          value.toLowerCase().indexOf("admin") >= 0 ||
          value.toLowerCase().indexOf("root") >= 0 ||
          value.toLowerCase().indexOf("password") >= 0 ||
          value.toLowerCase().indexOf("master") >= 0 ||
          value.toLowerCase().indexOf("local") >= 0 ||
          value.toLowerCase().indexOf("host") >= 0 ||
          value.toLowerCase().indexOf("qm@word1") >= 0
        ) {
          this.text =
            "密码中不能包含admin、root、password、master、local、host、qm@word1等";
          return false;
        }
      }
    },
    validateRePass(value) {
      if (value == "") {
        this.text2 = "请再次输入密码";
        return false;
      } else if (value !== this.password) {
        this.text2 = "两次输入密码不一致!";
        return false;
      }
    },
    changeType() {
      this.showPassword = !this.showPassword;
    },
    changeType2() {
      this.showPassword2 = !this.showPassword2;
    },
    gitPhone(a) {
      this.phone = a;
    },
    sendMsg() {
      if (!this.phone) {
        this.$f7.dialog.toast("请输入手机号");
        return;
      } else if (!this.mobileRegex(this.phone)) {
        this.$f7.dialog.toast("请确认手机号是否正确");
        return;
      }

      this.Verification = false;
      let timer = setInterval(() => {
        this.num--;
        if (this.num <= 0) {
          this.Verification = true;
          clearInterval(timer);
          this.num = 60;
        }
      }, 1000);
      this.getCode();
    },
    getCode() {
      this.$util
        .request(
          "/common/user/ext/sendLoginSms",
          {
            phone: this.phone,
          },
          "post"
        )
        .then((res) => {
          if (res.data.success) {
            this.codeInfo = res.data.parameters;
          } else {
            this.$f7.dialog.toast(res.data.message || "请求失败，请稍后重试！");
          }
        });
    },
    // 提交
    submit() {
      this.$refs.form
        .validate()
        .then((_) => {
          if (this.msgNum != this.codeInfo.randomNum) {
            this.$f7.dialog.toast("验证码错误，请重试！");
            return;
          }
          this.$f7.preloader.show();
          this.$f7.request.postJSON(
            "/common/user/ext/forgetPassword",
            {
              tamp: this.codeInfo.tamp,
              requestHash: this.codeInfo.hash,
              msgNum: this.msgNum,
              phone: this.phone,
              secret: this.$util.encryptRSA(this.password, this.rsaPublic),
            },
            (r) => {
              this.$f7.preloader.hide();
              if (r && r.success) {
                this.$f7.dialog.toast("重置密码成功！");
                this.$f7router.back();
              } else {
                this.$f7.dialog.alert(r.message || "注册失败，请稍后再试");
              }
            }
          );
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style lang="less" scoped>
.qm-page {
  .qm-block {
    --f7-block-margin-vertical: calc(56px * var(--ratio));
    .qm-block-title {
      --f7-block-title-line-height: 36px;
      --f7-block-title-margin-bottom: calc(40px * var(--ratio));
      margin-left: calc(35px * var(--ratio));
      .mobile-phone {
        font-size: 24px;
        font-weight: 500;
        color: var(--color-text-title);
      }
      .project {
        font-size: 16px;
        color: var(--color-text-subtext);
      }
    }
    .qmfield {
      margin-bottom: calc(43px * var(--ratio));
      img {
        vertical-align: middle;
        width: calc(36px * var(--ratio));
        height: calc(36px * var(--ratio));
      }
      .iconimg {
        margin-top: 4px;
      }
      .rigth-button {
        border-radius: 50%;
        --f7-theme-color: var(--color-brand);
        --f7-button-height: 30px;
      }
    }
    .qm-button {
      margin: calc(60px * var(--ratio)) 12px 0px;
      background-color: var(--color-brand);
      color: var(--color-text-base);
      font-size: var(--font-size-subtitle);
      --f7-button-raised-box-shadow: auto;
    }
    .footer {
      position: absolute;
      text-align: center;
      color: var(--color-text-subtext);
      font-size: 12px;
      left: 0px;
      right: 0px;
      margin-top: 210px;
    }
  }
}
</style>
